<template>
  <!-- 历史记录 -->
  <div class="history">
    <div class="history-body">
      <span>历史记录</span>
      <el-timeline class="">
        <el-timeline-item
          :timestamp="item.watched"
          placement="top"
          v-for="(item, index) in historyList"
          :key="index"
        >
          <el-card @click.native="toVideo(item.videoVO.id)">
            <el-row>
              <el-col :span="4">
                <el-image :src="item.videoVO.image"></el-image>
              </el-col>
              <el-col :span="16">
                <span>{{ item.videoVO.title }}</span>
                <div style="margin-top: 30px">
                  <span>{{ item.videoVO.author }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import { getHistoryList } from "@/api/userVideoApi";
export default {
  data() {
    return {
      id: sessionStorage.getItem("id"),
      historyList: [],
    };
  },

  methods: {
    //获取观看历史
    getHistoryList() {
      getHistoryList(this.id)
        .then((res) => {
          this.historyList = res.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    toVideo(id) {
      this.$router.push({
        name: "video",
        query: {
          id: id,
        },
      });
    },
  },

  mounted() {
    this.getHistoryList();
  },
};
</script>

<style>
.history span {
  font-weight: 600;
  margin: 10px 10%;
  position: relative;
}
.history-body {
  width: 80%;
  position: absolute;
}
.el-timeline {
  margin-top: 50px;
}
</style>